<template>
    <div>
        <page-header title="房产信息登记" />
        <page-main>
            <el-form :inline="true" size="mini" :model="arrayManagement.houseArray.searchCondition" class="demo-form-inline">
                <el-form-item label="编号">
                    <el-input width="120" v-model="arrayManagement.houseArray.searchCondition.code" placeholder="搜索编号" clearable></el-input>
                </el-form-item>
                <el-form-item label="查询人">
                    <el-input v-model="arrayManagement.houseArray.searchCondition.name" placeholder="住房人姓名" clearable></el-input>
                </el-form-item>
                <el-form-item label="身份证号码">
                    <el-input v-model="arrayManagement.houseArray.searchCondition.sfz" placeholder="身份证号码" clearable></el-input>
                </el-form-item>
                <el-form-item label="证明出具时间">
                    <el-date-picker
                          v-model="arrayManagement.houseArray.searchCondition.datetimeZones"
                          type="daterange"
                          value-format='yyyy-MM-dd'
                          range-separator="至"
                          start-placeholder="开始范围"
                          end-placeholder="结束范围"
                          :picker-options="pickerOptions.searchHouseInformation"
                          clearable>
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="模糊查询" prop="is">
                    <el-switch v-model="arrayManagement.houseArray.searchCondition.isVague"></el-switch>
                </el-form-item>
                <el-button size="mini" type="primary" icon="el-icon-search" @click="searchHouseInformationHandle" :loading="arrayManagement.houseArray.searchCondition.loading">搜索</el-button>
            </el-form>
            <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" style="margin-bottom: 10px;" @click="addHouseInformationHandle">新增记录</el-button>
            <el-table :data="arrayManagement.houseArray.data" border style="width: 100%;" size="mini" v-loading="arrayManagement.houseArray.searchCondition.loading">
                <el-table-column prop="code" label="编号" width="120" align="center"/>
                <el-table-column prop="name" label="住房人姓名" width="220" align="center"/>
                <el-table-column prop="sfz" label="身份证号" width="300" align="center"/>
                <el-table-column prop="proveDatetime" label="证明出具时间" width="280" align="center"/>
                <el-table-column prop="numberOfHouse" label="住房信息数" width="180" align="center"/>
                <!-- <el-table-column prop="marks" label="备注" width="400" align="center"/> -->
                <el-table-column fixed="right" label="操作" width="240" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" size="small" @click="viewHouseDetailHandle(scope.row)">查看</el-button>
                        <el-button type="primary" size="small" @click="editHouseDetailHandle(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="deleteHouseDetailHandle(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :current-page="arrayManagement.houseArray.pages.current"
                :page-sizes="arrayManagement.houseArray.pages.limit"
                :page-size="arrayManagement.houseArray.pages.size"
                :total="arrayManagement.houseArray.pages.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="houseTableSizeChangeHandle"
                @current-change="houseTableCurrentChangeHandle" />
        </page-main>

        <!-- 新增住房记录 -->
        <el-dialog title="住房记录登记" :visible.sync="dialog.houseInformationRegister.show" :close-on-click-modal="false">
            <addHouseInformation ref="addHouseInformation" @addSuccess="addSuccessHandle"></addHouseInformation>
        </el-dialog>
        <!-- 编辑住房记录 -->
        <el-dialog title="住房记录登记" :visible.sync="dialog.editHouseInformationRegister.show" :close-on-click-modal="false">
            <edit-house-information ref="editHouseInformation" :editId="dialog.editHouseInformationRegister.editId" @editSuccess="editSuccessHandle"></edit-house-information>
        </el-dialog>
    </div>
</template>

<script>
import { searchHouseInformation,deleteHouseInformation } from '@/api/house/index'
import addHouseInformation from '@/views/business_example/house_property_register/add/index'
import editHouseInformation from '@/views/business_example/house_property_register/edit/index'
export default {
    components: {
        addHouseInformation,
        editHouseInformation
    },
    data() {
        return {
            arrayManagement: {
                houseArray: {
                    data: [],
                    pages: {
                        current: 1,
                        size: 10,
                        limit: [10,50,100,200,300,400],
                        total: 0
                    },
                    searchCondition: {
                        code:'',
                        name:'',
                        sfz:'',
                        effectiveStartDatetime:'',
                        effectiveEndDatetime:'',
                        isVague: true,
                        datetimeZones:undefined,
                        loading:false
                    }
                }
            },
            dialog: {
                houseInformationRegister: {
                    show: false
                },
                editHouseInformationRegister: {
                    show: false,
                    editId: 0
                }
            },
            pickerOptions: {
                searchHouseInformation: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                }
            }
        }
    },
    mounted() {
      this.search()
    },
    methods:{
        houseTableSizeChangeHandle(e) {
            this.arrayManagement.houseArray.pages.size = e
            this.search()
        },
        houseTableCurrentChangeHandle(e) {
            this.arrayManagement.houseArray.pages.current = e
            this.search()
        },
        addSuccessHandle() {
            this.dialog.houseInformationRegister.show = false
            this.search()
        },
        editSuccessHandle() {
            this.dialog.editHouseInformationRegister.show = false
            this.search()
        },
        addHouseInformationHandle() {
            if(this.$refs.addHouseInformation){
                this.$refs.addHouseInformation.initData()
            }
            this.dialog.houseInformationRegister.show = true
        },
        viewHouseDetailHandle(row) {
            const { code, name, sfz } = row
             this.$router.push({ path: '/business/view/house_information', query: {code, name, sfz}})
        },
        editHouseDetailHandle(row) {
            if(this.$refs.editHouseInformation){
                this.$refs.editHouseInformation.initData(row.id)
            }
            this.dialog.editHouseInformationRegister.editId = row.id
            this.dialog.editHouseInformationRegister.show = true
        },
        deleteHouseDetailHandle(row) {
            let id = row.id
            this.$confirm('此操作将永久删除该住房记录, 是否继续?', '提示', {
                      confirmButtonText: '继续删除',
                      cancelButtonText: '再考虑一下',
                      type: 'warning'
                    }).then(() => {
                      deleteHouseInformation({id}).then(res => {
                          this.$message.success("删除成功")
                          this.search()
                      }).catch(() => {

                      })
                    }).catch(() => {

                    });

        },
        search() {
			
            const { current, size } = this.arrayManagement.houseArray.pages
            let { code, name, sfz, effectiveStartDatetime, effectiveEndDatetime, isVague, datetimeZones} = this.arrayManagement.houseArray.searchCondition
            if(datetimeZones){
                effectiveStartDatetime = this.$util.fetchCurrentTime(datetimeZones[0],'DATE') + ' 00:00:00'
                effectiveEndDatetime = this.$util.fetchCurrentTime(datetimeZones[1],'DATE') + ' 23:59:59'
            }
            this.arrayManagement.houseArray.searchCondition.loading = true
            searchHouseInformation({code, name, sfz, effectiveStartDatetime, effectiveEndDatetime, current, size, isVague}).then(res =>{
				let datas = res.data
				for(let data of datas){
					if(data.proveDatetime){
						data.proveDatetime = data.proveDatetime.replace(/T/g," ")
					}
				}
                this.arrayManagement.houseArray.data = datas
                this.arrayManagement.houseArray.pages.total = res.total
                this.arrayManagement.houseArray.searchCondition.loading = false
				
            }).catch(err =>{
                 this.arrayManagement.houseArray.searchCondition.loading = false
                if(err.code === 401){
                    this.$confirm('您的登录凭证已过期，请重新登录', '提示', {
                        confirmButtonText: '重新登录',
                        type: 'warning'
                    }).then(() => {
						this.$store.dispatch('user/logout').then(() => {
						    this.$router.push({
						        name: 'login', 
								query:{redirect: this.$route.path}
						    })
						})
                    })
                }

            })
        },
        searchHouseInformationHandle(){
            this.search()
        }
    }
}
</script>
<style scoped lang="scss">
::v-deep .el-pagination {
    margin-top: 20px;
}

</style>
